<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app"
import {ApplyCancelOrderReqVO, PageMovieOrderRespVO} from "@/interfaces/order"
import {computed, ref} from "vue"
import {useApplyCancelOrderApi} from "@/services/api";

const orderData = ref<PageMovieOrderRespVO>({
  createTime: "",
  id: "",
  images: "",
  isCancel: 0,
  isComplete: 0,
  movieName: "",
  movieStartTime: "",
  nickName: 0,
  price: "",
  seatList: [],
  auditStatus: 0
})
const show = ref<boolean>(false)
const reqData = ref<ApplyCancelOrderReqVO>({
  orderId: "",
  reason: ""
})
const auditMsgList = ref<string[]>([
  '审核中',
  '审核通过',
  '审核不通过'
])
const cancelOrder = async () => {
  reqData.value.orderId = orderData.value.id
  try {
    await useApplyCancelOrderApi(reqData.value)
    show.value = false
    await uni.navigateBack()
  }catch {
    show.value = false
  }

}
const isCanCancel = computed((): boolean => Date.parse(orderData.value.movieStartTime) > Date.now() && orderData.value.auditStatus == 0)
onLoad(({order}) => {
  orderData.value = JSON.parse(order)
})
</script>

<template>
  <view class="container">
    <view class="movie-image">
      <up-image radius="24rpx" mode="heightFix" :show-loading="true" :src="orderData.images" width="240rpx"
                height="360rpx"></up-image>
    </view>
    <view class="movie-info">
      <view class="info-item">
        <view class="movie-name text-color">
          {{ orderData.movieName }}
        </view>
        <view class="movie-start-time text-color">
          场次开场时间：{{ orderData.movieStartTime }}
        </view>
        <view class="order-time text-color">
          下单时间：{{ orderData.createTime }}
        </view>
        <view class="seat-list">
          <view class="title text-color">
            所选座位：
          </view>
          <view class="seat" v-for="(seat,index) in orderData.seatList" :key="index">
            {{ (seat.rowCode + 1) + "排" + (seat.columnCode + 1) + "座" }}
          </view>
        </view>
        <view class="price-item">
          <view class="text-color">
            价钱：
          </view>
          <view class="price">
            ￥{{ orderData.price }}
          </view>
        </view>
        <view class="text-color">
          订单号：{{ orderData.id }}
        </view>
        <view class="audit-msg" v-if="orderData.auditStatus!==0">
          退款进度：{{ auditMsgList[orderData.auditStatus - 1] }}
        </view>
      </view>
    </view>
    <view class="cancelButton" v-if="isCanCancel">
      <up-button type="error" text="申请退款" shape="circle" @click="show = true"></up-button>
    </view>
    <u-modal
        :show="show"
        title="取消理由"
        :showCancelButton="true"
        @confirm="cancelOrder"
        @cancel="show = false"
    >
      <u--textarea v-model="reqData.reason" placeholder="请输入取消理由"></u--textarea>
    </u-modal>
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #45496a;
}

.movie-image {
  padding-top: 64rpx;
}

.movie-info {
  margin-top: 36rpx;
  padding: 24rpx;
  width: 100%;
  height: 100%;
  background-color: #7d8bae;

}

.info-item {
  padding: 12rpx 36rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.text-color {
  color: #ffffff;
}

.movie-name {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  font-weight: bold;
}

.seat-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16rpx;
}

.seat {
  background-color: #E8CCC7;
  border-radius: 16rpx;
  padding: 12rpx;
}

.price {
  color: #dd524d;
}

.price-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.cancelButton {
  width: 90%;
  position: absolute;
  bottom: 3%;
}

.audit-msg {
  color: #EDCE7A;
}
</style>